body {
    background-image: url(IMAGES/teeth.gif);
}

:root {
    color-scheme: dark;
}

.container {
    display: grid;
    gap: 10px;
    max-width: 1200px;
    margin: auto;
    padding: 5px;
    position: relative;
    grid-template-columns: repeat(3, fr);
    grid-template-rows: repeat(4, fr);
    grid-template-areas:
        "header header header"
        "favs intro intro"
        "favs recent recent"
        "favs recent recent";
    color: rgb(131, 82, 79);
}

@font-face {
  font-family: adorabledoll;
  src: url(ELEMENTS/FONTS/AdorableDoll.woff);
}

h1 {
    font-family: adorabledoll;
}

p {
    font-size: larger;
    text-align: start;
}

.item1 {
    grid-area: header;
    text-align: center;
}

.item2 {
    grid-area: favs;
    text-align: center;
    background-color: rgb(83, 36, 33);
    border: 5px solid rgb(131, 82, 79);
}

.item3 {
    grid-area: intro;
    text-align: center;
    background-color: rgb(83, 36, 33);
    border: 5px solid rgb(131, 82, 79);
}

.item4 {
    grid-area: recent;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    background-color: rgb(83, 36, 33);
    border: 5px solid rgb(131, 82, 79);
    overflow-y: scroll;

}